<template>
	<view class="bindBox">
		<view class="">
			选择小区:
			<select class="select" @change="xqChange" v-model="xqValue">
				<option value="">请选择</option>
				<option v-for="(item, index) in xqSelect" :key="index" :value="item.value">
					{{item.label}}
				</option>
			</select>
		</view>
		<view class="item">
			选择楼栋:
			<select class="select" @change="ldChange" v-model="ldValue">
				<option value="">请选择</option>
				<option v-for="(item, index) in ldSelect" :key="index" :value="item.value">
					{{item.label}}
				</option>
			</select>
		</view>
		<view class="item">
			选择单元:
			<select class="select" @change="dyChange" v-model="dyValue">
				<option value="">请选择</option>
				<option v-for="(item, index) in dySelect" :key="index" :value="item.value">
					{{item.label}}
				</option>
			</select>
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">姓名</view>
			<input class="uni-input" v-model="FormData.name" focus placeholder="请输入姓名" />
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">手机号</view>
			<input class="uni-input" v-model="FormData.phone" focus placeholder="请输入手机号" />
		</view>
		<button type="primary" class="item" @click="query">查询</button>
		<view class="box" v-for="(item, index) in housList" :key="index" @click="bindHouse(item)">
			<view class="shuangb"><text>房屋: {{item.name}}</text><text>小区名称: {{item.xqname}}</text></view>
			<view class="name">姓名: {{item.owner_name}}</view>
			<view class="name">手机号: {{item.owner_phone}}</view>
			<view class="shuangb"><text>楼栋名称: {{item.ldname}}</text><text>单元名称: {{item.dyname}}</text></view>
			<view>面积: {{item.area}}</view>
			<view class="cent"><text class="bdfw">绑定房屋</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xqValue: '',
				xqSelect: [],
				ldValue: '',
				ldSelect: [],
				dyValue: '',
				dySelect: [],
				FormData: {
				  name: '',
					phone: ''
				},
				housList: []
			}
		},
		mounted() {
			let params = {
				page: 1,
				limit: 999999,
			};
			this.init(params);
		},
		methods: {
			init(params) {
				this.$api.getUptown(params).then((res) => {
					let zopt = []
					res.rows.map(item => {
						let opt = {
							value: item.id,
							label: item.name
						}
						zopt.push(opt)
					})
					this.xqSelect = zopt
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			xqChange(val) {
				console.log(this.xqValue)
				if (this.xqValue !== '') {
					let params = {
						page: 1,
						limit: 999999,
					};
					params.belongId = this.xqValue
					this.$api.getUptownBuilding(params).then((res) => {
						let zopt = []
						res.rows.map(item => {
							let opt = {
								value: item.id,
								label: item.name
							}
							zopt.push(opt)
						})
						this.ldSelect = zopt
					}).catch((err) => {
						console.log('request fail', err);
					})
				} else {
					this.ldSelect = []
					this.dySelect = []
				}
			},
			ldChange(val) {
				console.log(this.ldValue)
				if (this.ldValue !== '') {
					let params = {
						page: 1,
						limit: 999999,
					};
					params.belongId = this.ldValue
					this.$api.getUptownUnit(params).then((res) => {
						let zopt = []
						res.rows.map(item => {
							let opt = {
								value: item.id,
								label: item.name
							}
							zopt.push(opt)
						})
						this.dySelect = zopt
					}).catch((err) => {
						console.log('request fail', err);
					})
				} else {
					this.dySelect = []
				}
			},
			dyChange(val) {},
			query() {
				let params = {
					page: 1,
					limit: 999999,
				};
				params.belongXq = this.xqValue
				params.belongLd = this.ldValue
				params.belongDy = this.dyValue
				params.ownerName = this.FormData.name
				params.ownerPhone = this.FormData.phone
				this.$api.getHouses(params).then((res) => {
					this.housList = res.rows
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			// 绑定房屋按钮
			bindHouse(item) {
				console.log(item.id)
				let params = {
					customerId: uni.getStorageSync('user').roleId,
					houseId: item.id,
				};
				this.$api.setHouseContact(params).then((res) => {
					if (res.success) {
						uni.showToast({
							icon: 'success',
							title: "绑定成功",
							duration: 1000
						});
						setTimeout(() => {
							uni.switchTab({
							    url: '/pages/home/home'
							});
						},1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: "请勿重复设置!",
							duration: 1000
						});
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bindBox {
		margin: 5px;
		padding: 5px;
		.item {
			margin-top: 10px;
		}
		.select {
			width: 100%;
			margin-top: 5px;
			height: 30px;
		}
		.box {
			background: #F8F8FF;
			margin: 10px;
			border-radius: 10px;
			padding: 10px;
			line-height: 24px;
		}
		.name {
			font-weight: bold;
			font-size: 16px;
		}
		.shuangb {
			display: flex;
			justify-content: space-between;
		}
		.cent {
			display: flex;
			justify-content: center;
		}
		.bdfw {
			background: #007AFF;
			display: block;
			width: 100px;
			text-align: center;
			border-radius: 10px;
			color: #fff;
		}
	}
</style>
